<template>
  <PageWrapper dense>
    <CollapseContainer title="产品明细">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions" />
    </CollapseContainer>
  </PageWrapper>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { BasicTableProps, VxeBasicTable } from '@/components/VxeTable';
import type { VxeGridInstance } from 'vxe-table';
defineOptions({ name: 'BaseInfo' });
const props = defineProps({
  customerInfo: {
    type: Object,
    default: () => ({}),
  },
});
const tableRef = ref<VxeGridInstance>();
const gridOptions = reactive<BasicTableProps>({
  id: 'CodeGenVxeTable',
  keepSource: true,
  border: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  columns: [
    {
      title: '序号',
      type: 'seq',
      fixed: 'left',
      width: '50',
      align: 'center',
    },
    {
      title: '商品名称',
      field: 'name',
      align: 'center',
    },
    {
      title: '描述',
      field: 'remark',
    },
    {
      title: '数量',
      field: 'num',
    },
    {
      title: '单价',
      field: 'price',
    },
    {
      title: '合计',
      field: 'amount',
      slots: {
        default: ({ row }) => {
          return row.num * row.price;
        },
      },
    },
  ],
  toolbarConfig: {
    enabled: false,
  },
  columnConfig: {
    resizable: true,
  },
  data: [],
  proxyConfig: {
    // 必须设置
    enabled: false,
  }
});
</script>
